<template>
  <div class="bookShelf">
    <div class="bookShelf_top">
      <div v-if="isArran">
        <div class="bookShelf_num">0</div>
        <div class="bookShelf_box">
          <span class="bookShelf_tip">今日已读 (分钟)</span>
          <div class="bookShelf_right">
            <span class="bookShelf_title" @click="arrange">整理书架</span>
            <span class="bookShelf_read" @click="linkRecord()">阅读记录</span>
          </div>
        </div>
      </div>
      <div v-else>
        <span class="bookShelf_all" @click="allSele()" v-if="!checkAll">全选</span>
        <span class="bookShelf_all" @click="cancelSele()" v-else>取消全选</span>
        <div class="bookShelf_right">
          <span class="bookShelf_title" @click="removeShelf()">移除书架</span>
          <span class="bookShelf_read" @click="isArran=true">取消</span>
        </div>
      </div>
    </div>
    <div class="bookShelf_wrap" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
      <div v-if="shelfList && shelfList.length > 0">
        <div class="bookShelf_main">
          <div class="bookShelf_list" v-for="(item,index) in shelfList" :key="index">
            <div class="bookShelf_con">
              <img :src="coverUrl(item.cover)" @error="errImg('book')" class="cover" 
              @click="!isArran&&!item.isChecked ? linkTo(index) : linkDet('bookDet',item.resourceId)">
              <div class="bookShelf_already">已读{{item.readingProgress}}%</div>
              <img src="@/assets/index/no_sel.png" @click="linkTo(index)" class="bookShelf_icon" v-if="!isArran&&!item.isChecked">
              <img src="@/assets/index/sel.png" @click="linkTo(index)" class="bookShelf_icon" v-if="item.isChecked&&!isArran">
            </div>
            <div class="bookShelf_name" @click="linkDet('bookDet',item.resourceId)">{{item.name}}</div>
          </div>
        </div>
        <p v-if="loading" class="page-infinite-loading">
          <span>
            <mt-spinner type="fading-circle"></mt-spinner>
            加载中...
          </span> 
        </p>
        <p v-else class="loadOver">
          <span v-if="!isNull && isLast">—— 我是有底线的 ——</span>
        </p> 
      </div>
      <div class="special_no" v-if="shelfList && shelfList.length == 0 && !loading">
        <img class="no_con" src="@/assets/common/no_content.png">
        <div class="no_text">抱歉，目前暂无内容哦~</div>
      </div>
    </div>
  </div>
</template>

<script>
import '@static/css/common.css'
import { Toast } from 'mint-ui'
import { shelfListAPI, shelfRemoveAPI } from '@/api/shelf'

export default {
  data () {
    return {
      isArran: true,
      shelfList: [],
      listQuery: {
        pageNum: 1,
        pageSize: 10
      },
      totalPage: null,
      loading: false,
      isNull: '',
      isLast: '',
      checkAll: false
    }
  },
  mounted() {
    if(localStorage.getItem('y-token')) {
      this.getList()
    }
  },
  methods: {
    arrange() { //点击整理书架按钮切换头部内容
      this.isArran = false 
      this.shelfList.map(el => { el.isChecked = false }) //点击取消切换头部内容，图书不是选中状态
    },
    allSele() { //全选
      this.checkAll = true
      this.shelfList.map(el => { el.isChecked = true })
    },
    cancelSele() { //取消全选
      this.checkAll = false
      this.shelfList.map(el => { el.isChecked = false })
    },
    linkTo(index) { //选择当前图书
      let that = this
      if(!this.shelfList[index].isChecked) {
        this.shelfList[index].isChecked = true
      } else {
        this.shelfList[index].isChecked = false
      }
    },
    getList() { //书架列表
      this.loading = true
      shelfListAPI(this.listQuery).then(res => {
        if(res.data.code === 0) {
          var list = []
          if(res.data.data.list && res.data.data.list.length>0){
            if(this.listQuery.pageNum == 1) {
              res.data.data.list.map(el => { el.isChecked = false})
              list = res.data.data.list
            } else {
              list = this.shelfList.concat(res.data.data.list)
            }
          }
          this.shelfList = list
          this.totalPage = res.data.data.pages
          this.isNull = list && list.length > 0 ? false : true
          this.isLast = res.data.data.pages == this.listQuery.pageNum ? true : false
        } else {
          Toast(res.data.msg)
        }
        this.loading = false
      })
    },
    removeShelf() { //移除书架
      let that = this
      let list = this.shelfList.filter(el => el.isChecked)
      let newList = list.map(el => {return el.id})
      if(newList && newList.length > 0) {
        this.$confirm('确认要删除所选的书吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          center: true
        }).then(() => {
          shelfRemoveAPI(newList).then(res => {
            if(res.data.code==0){
              Toast('已将图书移出书架')
              this.shelfList = []
              that.getList()
            }else{
              Toast(res.data.msg)
            }
          })
        })
      } else {
        Toast('请选择一条图书记录进行移除')
      }
    },
    loadMore(){
      if(this.totalPage > this.listQuery.pageNum){
        this.listQuery.pageNum = this.listQuery.pageNum + 1
        this.getList()
      }
    },
    linkRecord() { //跳转至阅读历史记录
      this.navigationFuc('record')
    },
    // 跳转详情页
    linkDet(name,id) {
      this.navigationFuc(name, { id });
    }
  },
}
</script>

<style>
  .bookShelf .mint-spinner-fading-circle{
    margin: 0 auto;
    margin-bottom: 10px;
  }
  .bookShelf .page-infinite-loading{
    text-align: center;
    padding: 10px;
    color: #999999;
    font-size: 14px;
  }
  .bookShelf .loadOver{
    height: 0.8rem;
    text-align: center;
    line-height: 0.8rem;
    color: #999999;
    font-size: 14px;
  }
  .el-message-box {
    width: 250px !important;
  }
</style>
<style scoped>
  .bookShelf {
    width: 100%;
    min-height: 100%;
    padding-bottom: 1.3rem;
    box-sizing: border-box;
  }
  .bookShelf_top {
    margin-top: 0.38rem;
    margin-bottom: 0.6rem;
    padding: 0 0.4rem;
    box-sizing: border-box;
  }
  .bookShelf_num {
    color: #333333;
    font-size: 30px;
    font-weight: 400;
    margin-bottom: 0.23rem;
  }
  .bookShelf_box {
    overflow: hidden;
  }
  .bookShelf_tip {
    color: #8F8DAB;
    font-size: 10px;
    font-weight: 500;
  }
  .bookShelf_right {
    float: right;
  }
  .bookShelf_title {
    padding-right: 0.17rem;
    border-right: 0.01rem solid #E8E7E7;
    margin-right: 0.1rem;
    color: #000033;
    font-size: 12px;
  }
  .bookShelf_read {
    color: #000033;
    font-size: 12px;
  }
  .bookShelf_all {
    color: #000033;
    font-size: 12px;
  }
  .bookShelf_main {
    padding: 0 0.4rem;
    box-sizing: border-box;
    overflow: hidden;
    /* display: flex;
    flex-wrap: wrap; */
  }
  .bookShelf_list {
    width: 30%;
    height: 4.31rem;
    float: left;
    margin-right: 0.3rem;
  }
  .bookShelf_list:nth-child(3n) {
    margin-right: 0;
  }
  .bookShelf_con {
    position: relative;
    width: 1.9rem;
    height: 2.62rem;
  }
  .cover {
    width: 100%;
    height: 100%;
    border-radius: 0.1rem;
  }
  .bookShelf_icon {
    width: 0.36rem;
    height: 0.36rem;
    position: absolute;
    top: 0.12rem;
    right: 0.12rem;
  }
  .bookShelf_already {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 0.18rem 0 0 0.18rem;
    position: absolute;
    right: 0;
    bottom: 0.24rem;
    color: #FFFFFF;
    font-size: 9px;
    padding: 0.08rem;
    box-sizing: border-box;
  }
  .bookShelf_name {
    width: 1.8rem;
    margin-top: 0.2rem;
    color: #5E5F71;
    font-size: 15px;
    font-weight: bold;
    overflow: hidden;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    text-overflow:ellipsis;
    display: -webkit-box;
  }
</style>